import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class PaymentsInformationWidget extends ConsumerStatefulWidget {
  const PaymentsInformationWidget({super.key});

  @override
  _PaymentsInformationWidgetState createState() => _PaymentsInformationWidgetState();
}

class _PaymentsInformationWidgetState extends ConsumerState<PaymentsInformationWidget> {
  String? _paymentMethods;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 10),
      padding: const EdgeInsets.all(10),
      width: double.infinity,
      height: 120,
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: Colors.white),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text("配送時間"),
              Row(
                children: [
                  Text("時間不限"),
                  SizedBox(width: 10),
                  Icon(
                    Icons.arrow_forward_ios_sharp,
                    color: Colors.grey,
                    size: 12,
                  )
                ],
              )
            ],
          ),
          const Row(
            children: [
              Text.rich(
                TextSpan(
                  text: "買家備注",
                  children: [
                    WidgetSpan(
                      child: SizedBox(width: 10),
                    ),
                    TextSpan(text: "請儘快發貨")
                  ],
                ),
              ),
            ],
          ),
          GestureDetector(
            onTap: () {
              showCupertinoModalPopup(
                context: context,
                builder: (BuildContext context) {
                  return StatefulBuilder(
                    builder: (context, StateSetter modalSetState) {
                      return Container(
                        padding: const EdgeInsets.all(10),
                        width: double.infinity,
                        height: MediaQuery.of(context).size.height * 0.4,
                        color: Colors.white,
                        child: Stack(
                          children: [
                            Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                const Text("選擇支付方式"),
                                RadioListTile(
                                  value: "ALI_PAY",
                                  groupValue: _paymentMethods,
                                  dense: true,
                                  contentPadding: EdgeInsets.zero,
                                  title: Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      const Text("支付寶", style: TextStyle(fontSize: 16)),
                                      const SizedBox(width: 10),
                                      Image.asset('assets/pay_0.png', width: 24, height: 24),
                                    ],
                                  ),
                                  onChanged: (value) {
                                    modalSetState(() {
                                      _paymentMethods = value!;
                                    });
                                    setState(() {});
                                  },
                                ),
                                RadioListTile(
                                  value: "WECHAT_PAY",
                                  groupValue: _paymentMethods,
                                  dense: true,
                                  contentPadding: EdgeInsets.zero,
                                  title: Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      const Text("微信支付", style: TextStyle(fontSize: 16)),
                                      const SizedBox(width: 10),
                                      Image.asset('assets/pay_1.png', width: 24, height: 24),
                                    ],
                                  ),
                                  onChanged: (value) {
                                    modalSetState(() {
                                      _paymentMethods = value!;
                                    });
                                    setState(() {});
                                  },
                                )
                              ],
                            ),
                            Positioned(
                              left: 0,
                              right: 0,
                              bottom: 0,
                              child: GestureDetector(
                                onTap: () {
                                  Navigator.of(context, rootNavigator: true).pop();
                                },
                                child: Container(
                                  width: double.infinity,
                                  height: 50,
                                  alignment: Alignment.center,
                                  decoration: const BoxDecoration(
                                    borderRadius: BorderRadius.all(Radius.circular(10)),
                                    color: Colors.teal,
                                  ),
                                  child: const Text(
                                    "確定",
                                    style: TextStyle(color: Colors.white, fontSize: 18),
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),
                      );
                    },
                  );
                },
              );
            },
            child: const Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("支付方式"),
                Row(
                  children: [
                    Text("在綫支付"),
                    SizedBox(width: 10),
                    Icon(
                      Icons.arrow_forward_ios_sharp,
                      color: Colors.grey,
                      size: 12,
                    ),
                  ],
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}
